$namespace: 'z';
$common-separator: '-';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';

$color-primary: #409eff;
$color-white: #fff;
$color-black: #000;
$color-success: #67c23a;
$color-warning: #e6a23c;
$color-danger: #f56c6c;
$color-info: #909399;

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// BEM
@mixin b($block) {
  $B: $namespace + $common-separator + $block;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: & + $element-separator + $element;

  @at-root {
    #{$E} {
      @content;
    }
  }
}

@mixin m($modifier) {
  $M: & + $modifier-separator + $modifier;
  @at-root {
    #{$M} {
      @content;
    }
  }
}

// .z-button.is-disabled
@mixin is($state) {
  $S: $state-prefix + $state;
  @at-root {
    &.#{$S} {
      @content;
    }
  }
}
